<template>
  <div :style="'width:' + width">
    <div class="form-item-label-top">
      <span style="color: red; margin-right: 5px" v-if="required">*</span>
      <div>{{ name }}</div>
    </div>
    <el-table style="overflow: auto" :height="height" :data="data.datas" stripe border highlight-current-row>
      <el-table-column type="index" width="40"></el-table-column>
      <el-table-column v-for="(item, index) in columns" :label="item.Text" :key="index">
        <template slot-scope="scope">
          {{ scope.row[item.Text] }}
        </template>
      </el-table-column>
      <el-table-column fixed="right">
        <template slot="header">
          <el-button size="medium" type="text" slot="reference" icon="el-icon-plus"
            @click="addRowVis = true"></el-button>
        </template>
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-delete" @click="removeRow(scope.$index)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="addRowVis" width="620px" title="新增" :modal-append-to-body="false">
      <el-form label-width="auto" label-position="right">
        <el-form-item v-for="(item, index) in columns" :label="item.Text" :key="index">
          <el-input v-model="newRow[item.Text]"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="addRow">添加</el-button>
          <el-button type="text" @click="addRowVis = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ['value', 'disabled', 'props', 'required', 'isBusiness'],
  data: function () {
    return {
      data: {
        datas: [],
      },
      newRow: {},
      addRowVis: false,
    }
  },
  computed: {
    myprops() {
      return this.props ? this.props : []
    },
    height() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'height')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '140px'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '140px'
        }
      }
      return '140px'
    },
    width() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'width')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '100%'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '100%'
        }
      }
      return '100%'
    },
    columns() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'columns')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? JSON.parse(val.BFFP_Value) : []
        } else {
          return val.FFLP_Value ? JSON.parse(val.FFLP_Value) : []
        }
      }
      return []
    },
    name() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'name')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '表格'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '表格'
        }
      }
      return '表格'
    },
  },
  methods: {
    addRow() {
      this.data.datas.push(this.newRow)
      this.newRow = {}
      this.addRowVis = false
      this.input()
    },
    removeRow(index) {
      this.data.datas.splice(index, 1)
      this.input()
    },
    input() {
      this.data.displayName = `${this.name}:${this.data.datas.length}行数据`
      this.$emit('input', JSON.stringify(this.data))
      this.$emit('display', this.data.displayName)
    },
  },
  mounted: function () {
    if (this.value) {
      this.data = JSON.parse(this.value)
    }
  },
}
</script>
<style scoped>
.el-form-item {
  margin: 10px !important;
}
</style>